// 官网写法

import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  InternalAxiosRequestConfig,
  AxiosError,
} from 'axios';


// 创建axios实例
const request: AxiosInstance = axios.create({
  baseURL: "http://127.0.0.1:4523/m1/5702810-5383946-default",
  headers: {
    "Content-Type": "application/json"
  },
  timeout: 5000
})

// 请求拦截器
request.interceptors.request.use(
  (config: InternalAxiosRequestConfig)=>{
    // 在发送请求之前做些什么
    // 例如添加 token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  }, 
  (error: AxiosError) => {
    // 对请求错误做些什么
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
)
// 响应拦截器
request.interceptors.response.use(
  (res: AxiosResponse)=>{
    return res.data
  }, 
  (error: AxiosError) => {
    console.error('响应错误:', error.message);
    return Promise.reject(error);
  }
)

export default request;


/**
 * 1. 函数的泛型不需要指定类型是因为ts会在函数调用时通过传入的参数自动为泛型进行推导 
 * 
 * function fn<T>(arg: T): T {
 *  return arg;
 * }
 * fn(123)
 * 
 * 2. 但是接口的泛型不可以 因为ts并不知道传入的参数类型，所以无法进行类型推导 所以接口的泛型只能在定义时指定类型
 * 
 */

/**
 * AxiosResponse<axiosRequestInterface> axios提供的接口 data是一个泛型 所以我需要主动定义一个接口来描述data的结构 来使泛型能够正常工作
 * 
    interface AxiosResponse<T = any> {
      data: T; // 响应体数据，类型由泛型参数 T 决定
      status: number; // HTTP 状态码（如 200、404）
      statusText: string; // 状态文本（如 "OK"）
      headers: any; // 响应头
      config: AxiosRequestConfig; // 请求配置
    }
 */